<!--
 * @Description: 选择农场页面
-->
<template>
  <div class="choose-company">
    <Header />
    <div class="main-content" :class="{ hidden: showSystemChooseModal }">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="slidebar">
          <div class="list">
            <div v-for="(item, index) in list" :key="index" class="item" :class="activeIdx === index ? 'active' : ''" @click="changeActiveIdx(index, item)">{{ item }}</div>
          </div>
        </div>
      </el-scrollbar>
      <div v-if="showTopList" class="first-tankuang">
        <div class="farm-select">
          <div v-for="(item, ind) in organizationList" :key="ind" class="farm-item">
            <div class="pic" @click="chooseTopOrganization(item)">
              <!-- <div class="child-farm" @click.stop="selectfarmchild(item)">选择下级</div> -->
            </div>
            <div class="title">{{ item.organizationName }}</div>
            <div class="loc">
              <i class="el-icon-location"></i>
              <div class="addr">{{ item.address }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tree-select">
        <div class="tree-content">
          <div class="content-title">公司组织架构</div>
          <div class="content-tree">
            <Siderbar :organization-list="orgTreeList" @chooseCompany="chooseOrganization" />
          </div>
        </div>
      </div>
      <div class="farm-select">
        <div v-for="(item, ind) in orgList" :key="ind" class="farm-item">
          <div class="pic" @click="chooseOrganization(item)">
            <!-- <div class="child-farm" @click.stop="selectfarmchild(item)">选择下级</div> -->
          </div>
          <div class="title">{{ item.organizationName }}</div>
          <div class="loc">
            <i class="el-icon-location"></i>
            <div class="addr">{{ item.address }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择系统 -->
    <div class="system-choose-modal" :class="{ active: showSystemChooseModal }">
      <div class="system-choose-box">
        <div class="system-content">
          <div class="system-name">系统列表</div>
          <div class="system-list" :style="systemList.length <= 3 ? 'justify-content: center;' : ''">
            <!-- 卡片式 -->
            <div v-for="(item, index) in systemList" :key="index" class="system-choose-item" :class="item.virtualSystemNo" @click="chooseSystem(item)">
              <div class="ds"></div>
              <div class="system-choose-item-body">
                <div class="img">
                  <!-- <p>{{ item.virtualSystemName }}</p>
                  <p v-if="item.virtualSystemName === '生产管理系统'">{{ "OPERATION MANAGEMENT" }}</p>
                  <p v-if="item.virtualSystemName === '溯源管理系统'">{{ 'TRACEABILITY MANAGEMENT' }}</p>
                  <p v-if="item.virtualSystemName === '运营管理系统'">{{ 'PRODUCTION MANAGEMENT' }}</p>-->
                </div>
                <div class="name">{{ item.virtualSystemName }}</div>
              </div>
              <div class="system-btn">点击进入</div>
            </div>
          </div>
        </div>
        <div class="system-content">
          <div class="system-name">大屏列表</div>
          <div class="system-list">
            <!-- 卡片式 -->
            <div v-for="(item, index) in screenList" :key="index" class="system-choose-item" @click="chooseScreen(item)">
              <div class="ds"></div>
              <div class="system-choose-item-body">
                <div v-if="item.picUrl" class="img picUrl" :style="{ background: `url(${item.picUrl}) no-repeat` }"></div>
                <div v-else class="img" :class="getfarm(item, item.type || item.farmingTypeNo)">
                  <!-- <b class="img-p">点击进入</b> -->
                </div>
                <div class="name">{{ item.bigScreenName }}</div>
              </div>
              <div class="system-btn">点击进入</div>
              <!-- <div class="name">{{ item.bigScreenName }}</div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="back-btn" @click="backSys">返回</div>
    </div>
    <!-- <div class="copyright">
      版权所有：中科台达（浙江）信息技术有限公司｜ Copyright © 2019-2025 casdelta.com All Right Reserved
      <br />
      <a href="https://beian.miit.gov.cn" target="view_window">ICP备案号：浙ICP备19034790号-5</a>
    </div> -->
    <!-- 特殊 -->
    <!-- <div class="copyright">
      版权所有：COPYRIGHT © 渔雅科技（上海）有限公司
      <br />
      <a href="https://beian.miit.gov.cn" target="view_window">
        ICP备案号：沪ICP备20003371号-1</a>
    </div>-->
  </div>
</template>
<script>
// TODO:判断是否是初始密码--本来是在登录成功就跳转修改密码，在这是为了拿到数据发请求TODO:
import userManage from '@/api/system-settings/user-manage';
import Header from '@/layout/components/Header/index';
// import Footer from "@/layout/components/Footer/index";
import userService from '@/api/user/index';
import tenantService from '@/api/digital-operation/tenant-manage/tenant-info/index.js';
// import { getToken, setToken } from "@/utils/auth";
import store from '@/store';
import permission from '@/store/modules/permission';
import { getToken, setToken, removeToken } from '@/utils/auth';

import { getpasCookie } from '@/utils/cookie';
import Siderbar from './components/Siderbar';
import getfarmtypelistmethod from '@/api/basic-info-manage/agricultural-type-manage';
export default {
  name: 'ChoseCompany',
  components: { Header, Siderbar },
  data() {
    return {
      selectstau: 1, // 1为选择顶级组织结构，2为选择选择农场
      ischildfarmstau: false, // 展示子农场
      showSystemChooseModal: false, // 选择系统弹窗
      showTopList: true, // 展示顶级组织
      organizationList: [], // 顶级组织结构列表
      orgList: [], // 组织列表
      orgTreeList: [], // 树状组织列表
      activeIdx: '',
      search: '',
      farmList: [{ organizationName: '星光农场', organizationNo: 1 }],
      // 星光农场下的组织
      // 被选择的id
      nowChildFarmSelectIdList: [],
      // 列表信息
      childfarmlist: [],
      // true 启用动态路由 false 启用静态路由
      nowmenutype: permission.nowmenutype,
      systemList: [],
      screenList: [],
      farmingTypeNo: [],
      farmtypelist: []
    };
  },
  computed: {
    list() {
      let arr = [...Array(26).keys()].map(i => String.fromCharCode(i + 65));
      arr.unshift('#');
      return arr;
    }
  },
  watch: {},
  async mounted() {
    // 获取组织
    await this.getFarmList();
    // TODO:登录成功需要查一遍当前用户是否是初始密码
    let res = await this.queryPwd();
    if (res) {
      this.$router.push('/edit-password');
    }

    this.tologin();
    if (this.$store.state.permission.addRoutes.length > 0) {
      // 判断是否已经刷新
      // location.reload();
      history.go(0);
    }
  },
  methods: {
    // TODO:登录成功之后；判断是否是初始密码接口
    async queryPwd() {
      let params = {
        username: sessionStorage.getItem('account')
      };

      let res = await userManage.getDefaultPwdStatus(params);
      return res;
      // TODO: true代表是初始密码，false代表用户已将初始密码修改
    },
    // 查询左侧树状列表
    queryTreeByOrganizationNoList() {
      let list = this.orgList.map(el => {
        return el.organizationNo;
      });
      userService.queryTreeByOrganizationNoList(list).then(res => {
        if (res.code !== 1) {
          return;
        }
        this.orgTreeList = res.data || [];
        if (this.orgTreeList[0]) {
          setToken('organizationName', this.orgTreeList[0].organizationName);
        }
      });
    },
    async chooseTopOrganization(item) {
      setToken('topOrganization', item.organizationNo);
      if (!getToken('databaseName')) {
        let res = await userService.queryDatabaseNameByOrganizationNo(item.organizationNo);
        setToken('databaseName', res.data.databaseName);
      }
      // console.log('getToken', getToken('databaseName'))
      let ress = await userService.queryOrganization(item.organizationNo);
      if (ress.code !== 1) {
        return;
      }
      this.orgList = ress.data || [];
      if (this.orgList.length === 1) {
        // 我不知道改得有什么问题
        setToken('organizationNo', ress.data[0].organizationNo);
        // 查询下一级
        let orgliststring = await this.getchildnodeidlist(ress.data[0].organizationNo);
        // console.log(orgliststring)
        // let orgidlisttwo
        // if (orgliststring.length > 0) {
        //   orgidlisttwo = item.organizationNo + ',' + orgliststring
        // } else {
        //   orgidlisttwo = item.organizationNo
        // }
        setToken('organizationList', orgliststring);
        await this.openSystemChooseModal(ress.data[0].organizationNo);
        this.queryTreeByOrganizationNoList();
        this.showTopList = false;
      } else {
        // 我不知道改得有什么问题
        // setToken("organizationNo", ress.data[0].organizationNo);
        // 查询下一级
        let orgliststring = await this.getchildnodeidlist(ress.data[0].organizationNo);
        setToken('organizationList', orgliststring);
        this.queryTreeByOrganizationNoList();
        this.showSystemChooseModal = false;
        this.showTopList = false;

        if (getToken('organizationNo')) {
          let row = this.orgList.find(el => {
            return el.organizationNo == getToken('organizationNo');
          });
          this.chooseOrganization({
            organizationNo: getToken('organizationNo'),
            organizationName: row.organizationName
          });
        }
      }

      // })
    },
    tologin() {
      let tr = this.$route.query;
      if (tr.account) {
        let loginForm = {
          account: decodeURIComponent(tr.account),
          password: tr.password
        };
        this.$router.push({ path: '/login', query: loginForm });
      }
    },
    // 获取顶级组织结构id
    getFarmList() {
      // 获取顶级组织结构id,
      userService.organizationTop().then(res => {
        this.organizationList = res.data;
        if (res.length === 0 || res.data === []) {
          this.$message.warning('该账户下无公司，请联系管理员！');
          removeToken('token');
          this.$router.push({ path: '/login' });
        } else if (this.organizationList.length === 1) {
          this.goToTheFarm(this.organizationList[0]);
        }
      });
    },
    // 点击农场:rouertpid用于获取菜单
    async goToTheFarm({ organizationNo, organizationName }) {
      // console.log('goToTheFarm', organizationNo, organizationName);
      // v3/virtualSystem/queryOrganization?topOrganizationNo=${e.organizationNo}
      // 存储顶级农场id
      // if (!getToken('databaseName')) {
      // console.log(organizationNo)
      setToken('topOrganization', organizationNo);
      // console.log(getToken('topOrganization'))
      await this.chooseTopOrganization({ organizationNo: organizationNo });
      // }
      // setToken("organizationMark", organizationMark)

      // setToken("routerpid", rouertpid)
      // // 存储承租户的parentid,当isTenant===true,settoken-parentid
      // // ----
      // if (isTenant) {
      //   // 判断有没有下级
      //   userService.gettreeslist(organizationNo).then(
      //     // userService.farmListbyOrganizationId(this.farmList[0].organizationNo).then(
      //     res => {
      //       let childlistone = res.data
      //       // this.childfarmlist = this.filterArrForKey(childlistone)
      //       setToken("parentId", childlistone[0].parentId)
      //     }
      //   )
      // }
      // // --------------
      // // 存储所有组织结构字符串
      // // console.log(rouertpid, this.nowmenutype, this.$router.push({ name: "ZhControlView" }))

      // 显示选择系统页面
    },
    async chooseOrganization(item) {
      // 我不知道改得有什么问题
      // 查询下一级
      let orgliststring = await this.getchildnodeidlist(item.organizationNo);
      // console.log(item, orgliststring)
      // let orgidlisttwo
      // if (orgliststring.length > 0) {
      //   orgidlisttwo = item.organizationNo + ',' + orgliststring
      // } else {
      //   orgidlisttwo = item.organizationNo
      // }
      setToken('organizationList', orgliststring);
      setToken('organizationNo', item.organizationNo);
      // this.getfarmtype()
      await this.openSystemChooseModal(item.organizationNo);
      if (item) {
        setToken('organizationName', item.organizationName);
      }

      // this.queryTreeByOrganizationNoList();
      // this.showTopList = false;
      // })
    },
    cascaderChange(e) {
      // console.log(e)
    },
    // 选择公司时database
    getdataname(id) {
      // 获取databasename 并且存储session
      userService.getdatabasename(id).then(res => {
        let databaseName = res.data.databaseName;
        setToken('databaseName', databaseName);
      });
    },
    // 通过接口查子节点id
    async getchildnodeidlist(id) {
      let newArr = [];
      await userService.getchildidlist(id).then(res => {
        newArr = res.data;
        // newArr.splice(0, 1)
        return newArr;
      });
      return newArr;
    },
    // 循环过滤树形数组
    filterArrForKey(arr) {
      let newArr = [];
      if (arr === []) {
        return;
      }
      newArr = arr.map(item => {
        if (item.child.length > 0) {
          item = {
            ...item,
            child: this.filterArrForKey(item.child)
          };
        } else {
          delete item.child;
        }
        return item;
      });
      newArr = newArr.filter(item => item != null);
      return newArr;
    },
    // ---侧边栏abcd选择，然而并没什么用
    changeActiveIdx(idx, item) {
      this.activeIdx = idx;
      this.search = item;
      // console.log(this.search);
    },
    // 处理擅渔子系统  有问题找钱程铭  17863965769
    getSystemList_SY(systemList) {
      let flag = null; // 是否存在擅渔子系统标记
      let new_systemList = []; // 存在一个或多个子系统是整合成一个入口 不存在则原系统集合返回
      let sy_systemList = []; // 擅渔系统
      let userInfo = JSON.parse(getToken('userInfo'));
      let jumpUrl = null;
      // setToken("virtualSystemNo", null)
      // 判断是否存在擅渔系统标记的系统
      flag = systemList.some(e => {
        return e.virtualSystemNo.indexOf('SYXT') !== -1;
      });
      // 过滤擅渔子系统
      if (flag) {
        new_systemList = systemList.filter(e => {
          return e.virtualSystemNo.indexOf('SYXT') === -1;
        });
        sy_systemList = systemList.filter(e => {
          return e.virtualSystemNo.indexOf('SYXT') !== -1;
        });
        if (sy_systemList[0] && sy_systemList[0].jumpUrl) {
          jumpUrl = `${sy_systemList[0].jumpUrl}?account=${encodeURIComponent(userInfo.account)}&password=${encodeURIComponent(userInfo.password)}&organizationNo=${sessionStorage.organizationNo}&entrance_flag=IADP`;
        } else {
          jumpUrl = null;
        }
        new_systemList.push({
          organizationNo: sy_systemList[0].organizationNo,
          virtualSystemName: '擅渔系统',
          virtualSystemNo: sy_systemList[0].virtualSystemNo,
          jumpUrl: jumpUrl
          // jumpUrl: `http://localhost:1018/#/login?account=${encodeURIComponent(userInfo.account)}&password=${encodeURIComponent(userInfo.password)}&organizationNo=${sessionStorage.organizationNo}&entrance_flag=IADP`
        });
      } else {
        new_systemList = systemList;
      }
      return new_systemList;
    },
    // 拉取系统选择界面
    openSystemChooseModal(no) {
      this.showSystemChooseModal = true;
      userService.queryVirtualSystem(no).then(res => {
        if (res.code !== 1) {
          return;
        }
        console.log(res.data);
        let systemList = res.data.filter(item => {
          return item.virtualSystemNo.indexOf('app') === -1 && item.virtualSystemNo.indexOf('App') === -1 && item.virtualSystemNo.indexOf('APP') === -1 && (item.farming == 'PLANT' || !item.farming);
        });
        // 处理擅渔系统 有问题找钱程铭  17863965769
        systemList = this.getSystemList_SY(systemList) || systemList;
        console.log(systemList);
        this.systemList = systemList;

        // this.systemList = systemList.filter(item => {
        //   return item.virtualSystemNo !== "equipApp";
        // });
        // this.systemList = this.systemList.filter(item => {
        //   return item.virtualSystemNo !== "workApp";
        // });
        if (getToken('virtualSystemNo') !== undefined) {
          let index = this.systemList.findIndex(item => item.virtualSystemNo === getToken('virtualSystemNo'));
          console.log(this.systemList[index], this.systemList, index);
          if (index !== -1) {
            console.log(this.systemList[index]);
            !this.systemList[index].jumpUrl && this.chooseSystem(this.systemList[index]);
          }
        }
      });
      userService.getOrganizationBigScreen(no).then(res => {
        if (res.code !== 1) {
          return;
        }
        res.data.forEach(async element => {
          // element['farmingTypeNo'] = console.log(await this.getfarmtype())
          this.$set(element, 'farmingTypeNo', await this.getfarmtype());
        });
        // console.log(res.data)
        this.screenList = res.data.filter(el => { return el.type == 'dt' || !el.type });
      });
      this.getfarmtypes();
    },
    // 选择系统
    chooseSystem(item) {
      setToken('farming', item.farming);
      setToken('virtualSystemNo', item.virtualSystemNo);
      // 让动态路由重新加载
      setToken("systemName", item.virtualSystemName);
      setToken("logo", item.logo);
      setToken("farming", 'PLANT');
      this.getSystemzation();
      if (item.virtualSystemNo === "equip") {
        let c = JSON.parse(getToken("userInfo"));
        let zhurl = `${this.$webSerUrl}agri-machine-management/#/login?token=${c.account + "&" + c.password}&organizationNo=${sessionStorage.organizationNo}`;
        window.location.href = zhurl
        return;
      }
      if (item.virtualSystemNo.includes('ZY')) {
        let c = JSON.parse(getToken("userInfo"));
        let zhurl = `${this.$webSerUrl}Intellectual-nourishment/#/login-loading?token=${c.account + "&" + c.password}&organizationNo=${sessionStorage.organizationNo}&virtualSystemNo=${item.virtualSystemNo}`;
        window.location.href = zhurl
        return;
      }
      if (item.virtualSystemNo.includes('traceability')) {
        let c = JSON.parse(getToken("userInfo"));
        let zhurl = `${this.$webSerUrl}traceability-system/#/login-loading?token=${c.account + "&" + c.password}&organizationNo=${sessionStorage.organizationNo}&virtualSystemNo=${item.virtualSystemNo}&databaseName=${sessionStorage.databaseName}&systemName=${item.virtualSystemName}&farmingTypeNo=${sessionStorage.farmingTypeNo}`;
        window.location.href = zhurl
        return;
      }
      // 处理擅渔子系统  有问题找钱程铭  17863965769
      // console.log(item)
      // debugger
      if (item.jumpUrl) {
        if (item.jumpUrl.indexOf('account') == -1) {
          let userInfo = JSON.parse(getToken('userInfo'));
          item.jumpUrl = `${item.jumpUrl}?account=${encodeURIComponent(userInfo.account)}&password=${encodeURIComponent(userInfo.password)}&organizationNo=${sessionStorage.organizationNo}&entrance_flag=IADP`;
        }
        window.location.href = item.jumpUrl;
        return;
      }
      if (this.nowmenutype) {
        store.dispatch('permission/generateRoutes').then(res => {
          // console.log(res)
          if (res[0].children === undefined) {
            this.$message.warning('请先配置菜单！');
          } else {
            this.$router.push({ name: `${res[0].children[0].name}` });
          }
          // console.log(this.$store.state.permission.pageElementList, 'pageElementList');
          // userService.queryPageElement(item.virtualSystemNo).then(eleres=>{
          // })
        });
      } else {
        this.$router.push({ name: 'ZhControlView' });
      }
    },
    chooseScreen(item) {
      let c = JSON.parse(getToken('userInfo'));
      // console.log(c)
      let x = getpasCookie(c.account + '&' + c.password);
      // 老配置化大屏
      if (item.url.includes('bigscreencfi')) {
        let zhurl = `${item.url}?token=${c.account + '&' + c.password}&organizationNo=${sessionStorage.organizationNo}&virtualSystemNo=${item.virtualSystemNo}`;
        window.open(zhurl, '_blank');
        return;
        // 新配置大屏？？
      } else if (item.url.includes('ECCSSC***')) {
        let zhurl = `${item.url}?token=${sessionStorage.token}&organizationNo=${sessionStorage.organizationNo}&databaseName=${sessionStorage.databaseName}`;
        window.open(zhurl, '_blank');
        return;
        // 新版驾驶舱
      } else if (item.url.includes('/showCockpit')) {
        let json = { username: x.account, password: x.password };
        let token = btoa(encodeURIComponent(JSON.stringify(json)));
        let zhurl = `${item.url}?token=${token}`;
        window.open(zhurl, '_blank');
        return;
        // 旧馆 & 平湖
      } else if (item.url.includes('/dataVfarmService') || item.url.includes('/dataScreenService')) {
        let zhurl = `${item.url}?token=${c.account + '&' + c.password}&organizationNo=${sessionStorage.organizationNo}`;
        window.open(zhurl, '_blank');
        return;
        // 老大屏的单独项目
      } else {
        let zhurl = `${item.url}?account=${x.account}&password=${x.password}&organizationNo=${sessionStorage.organizationNo}`;
        window.open(zhurl, '_blank');
        return;
      }
      // console.log(x)
      // let zhurl = `${item.url}?account=${x.account||c.account}&password=${x.password||c.password}&organizationNo=${sessionStorage.organizationNo}`;
      // window.open(zhurl, "_blank");
    },
    async getSystemzation() {
      const { data: res } = await userService.getSystemzation();
      if (res.personNo !== undefined) {
        const { data: tenant } = await tenantService.querysesByCondition({
          organizationNo: sessionStorage.organizationNo,
          personNo: res.personNo
        });
        if (tenant.length > 0) {
          setToken('lesseeNo', tenant[0].lesseeNo);
          tenantService.querybindCache(tenant[0].lesseeNo);
        }
      } else {
        if (getToken('lesseeNo')) {
          removeToken('lesseeNo');
        }
      }
    },
    // 获取大屏农业类型
    async getfarmtype() {
      let leng = getToken('organizationNo');
      this.isshowtobigsceen = true;
      const res = await getfarmtypelistmethod.ownFarmingTypelist({
        organizationNo: leng
      });
      this.loading = false;
      // console.log('liudw', res)
      if (res.code === 0) {
        this.$message.error('当前农业类型获取失败');
      } else {
        // console.log('liudw', res)
        this.farmingTypeNo = res.data[0].farmingTypeNo;
        this.farmtypelist = res.data;
        // setToken('farmingTypeNo', res.data[0].farmingTypeNo)
        return res.data[0].farmingTypeNo;
      }
    },
    async getfarmtypes() {
      let leng = getToken('organizationNo');
      const res = await getfarmtypelistmethod.ownFarmingTypelist({
        organizationNo: leng
      });
      if (res.code === 0) {
        this.$message.error('当前农业类型获取失败');
      } else {
        if (getToken('farmingTypeNoQuery')) {
          setToken('farmingTypeNo', getToken('farmingTypeNoQuery'));
        } else {
          setToken('farmingTypeNo', res.data[0].farmingTypeNo);
        }
      }
    },
    getfarm(data, e) {
      if (e) {
        // console.log(e)
        let farming = '';
        switch (e) {
          case 'dt':
            farming = 'dt';
            break;
          case 'dp':
            farming = 'dp';
            break;
          case 'gc':
            farming = 'gc';
            break;
          case 'sc':
            farming = 'sc';
            break;
          case 'xm':
            farming = 'xm';
            break;
          case 'yyj':
            farming = 'yyj';
            break;
          case '':
            break;
        }
        return farming;
      }
    },
    backSys () {
      if (sessionStorage.entrance_flag === 'CN') {
        window.location.href = `${this.$webSerUrl}agricultural-unified-login/#/choose-company`
      } else {
        showSystemChooseModal = false
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import '~@/styles/variables.scss';
$slidebarWidth: 40px;
$highBule: rgb(0, 235, 208);

@keyframes borderbg {
  from {
    border-radius: 0;
  }

  to {
    background-color: #fff;
    color: #333;
    border-radius: 20px;
  }
}

.choose-company {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;

  ::v-deep(.header) {
    flex-shrink: 0;
  }

  .main-content {
    height: calc(100% - 60px);
    background-color: #003947;
    display: flex;
    justify-content: space-between;

    .tree-select {
      width: 240px;
      height: 100%;
      padding: 16px;
    }

    .farm-select {
      width: calc(100% - 280px);
      height: 100%;
      display: flex;
      // justify-content: center;
      // align-items: center;
      justify-content: space-around;
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;
      overflow-y: auto;
      padding-bottom: 60px;

      .farm-item {
        width: 30%;
        height: 300px;
        position: relative;
        margin-bottom: 20px;
        margin-top: 20px;
        // margin-right: 1.5%;
        // margin-left: 1.5%;
        background: rgba(0, 110, 145, 0.4);
        border: 1px solid #b9d6de;
        color: #fff;
        padding: 15px;
        padding-bottom: 10px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: 0.5s;

        &:nth-child(4n) {
          margin-right: 0;
        }

        &:hover {
          transform: scale(1.05);
        }

        .pic {
          width: 100%;
          height: 80%;
          border: 1px solid #b9d6de;
          // background-image: url("~@/assets/index-bgc.png");
          background-image: url(https://img.js.design/assets/img/613074df79456d9eec79f371.jpg);
          background-color: #003947;
          background-size: cover;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;

          .child-farm {
            width: 97px;
            height: 26px;
            background: linear-gradient(180deg, rgba(0, 193, 254, 1) 0%, rgba(41, 177, 220, 1) 57.22%, rgba(51, 207, 255, 1) 100%);
            box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.26);
            border-radius: 5px;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            text-align: center;
            line-height: 26px;
          }
        }

        .title {
          width: 100%;
          text-align: center;
          font-size: 0.8vw;
          margin: 5px 0;
        }

        .loc {
          width: 100%;
          display: flex;
          justify-content: center;
          font-size: 0.8vw;

          i {
            color: #56845b;
            font-size: 20px;
            margin-right: 5px;
          }
        }
      }
    }

    .el-scrollbar {
      height: 100%;
      width: $slidebarWidth;
      background-color: #006988;

      .slidebar {
        width: $slidebarWidth;
        height: 100%;

        // overflow-y: auto;
        .list {
          width: 100%;
          height: 100%;
          border-radius: 50px;
          display: flex;
          flex-direction: column;

          .item {
            width: $slidebarWidth;
            height: $slidebarWidth;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
            cursor: pointer;

            &:hover {
              animation-name: borderbg;
              animation-iteration-count: 1;
              animation-fill-mode: forwards;
              animation-duration: 0.5s;
            }
          }

          .active {
            font-weight: bold;
            background-color: #fff;
            color: #333;
            border-radius: 50px;
          }
        }
      }
    }
  }
}

.tree-select {
  .tree-content {
    height: 100%;
    background: $headerBg;

    .content-title {
      line-height: 50px;
      color: #fff;
      text-align: center;
      border-bottom: 1px dashed #fff;
    }

    .content-tree {
      height: calc(100% - 50px);
    }
  }
}

.first-tankuang {
  width: 100%;
  height: calc(100% - 24px);
  background-color: #003947;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;

  .farm-select {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .farm-item {
      width: 400px;
      height: 300px;
      position: relative;
      margin-right: 20px;
      margin-bottom: 20px;
      margin-top: 20px;
      background: rgba(0, 110, 145, 0.4);
      border: 1px solid #b9d6de;
      color: #fff;
      padding: 15px;
      padding-bottom: 10px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: 0.5s;

      &:nth-child(4n) {
        margin-right: 0;
      }

      &:hover {
        transform: scale(1.05);
      }

      .pic {
        width: 100%;
        height: 80%;
        border: 1px solid #b9d6de;
        // background-image: url("~@/assets/index-bgc.png");
        background-image: url(https://img.js.design/assets/img/613074df79456d9eec79f371.jpg);
        background-color: #003947;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;

        .child-farm {
          width: 97px;
          height: 26px;
          background: linear-gradient(180deg, rgba(0, 193, 254, 1) 0%, rgba(41, 177, 220, 1) 57.22%, rgba(51, 207, 255, 1) 100%);
          box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.26);
          border-radius: 5px;
          color: rgba(255, 255, 255, 1);
          font-size: 16px;
          text-align: center;
          line-height: 26px;
        }
      }

      .title {
        width: 100%;
        text-align: center;
        font-size: 0.8vw;
        margin: 5px 0;
      }

      .loc {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 0.8vw;

        i {
          color: #56845b;
          font-size: 20px;
          margin-right: 5px;
        }
      }
    }
  }
}

.three-tankuang {
  width: 100%;
  height: calc(100% - 24px);
  background-color: rgba(228, 228, 228, 0.5);
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .childcompany-list {
    border-radius: 9px;
    width: 590px;
    height: 250px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 1);

    .org-title {
      background-color: rgba(0, 110, 145, 1);
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
      height: 60px;
      // border-bottom: #fff 1px solid;
      color: #fff;
      padding-left: 20px;
      font-size: 23px;
      display: flex;
      align-items: center;

      .sel-te {
        padding-left: 10px;
        line-height: 27px;
        height: 27px;
        border-left: #fff 4px solid;
        color: #fff;
        font-size: 23px;
      }
    }

    .select-main {
      width: 500px;
      margin: 50px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 9px;

      .far-sel {
        width: 300px;

        .el-cascader {
          width: 300px;
        }
      }

      .toindex-but {
        margin-left: 20px;
        width: 50px;
        height: 32px;
        cursor: pointer;
        color: #fff;
        line-height: 32px;
        white-space: nowrap;
        text-align: center;
        background-color: #7fd354;
        border-top-left-radius: 0px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 0px;
      }

      .quxiao-but {
        margin-left: 10px;
        width: 50px;
        height: 32px;
        cursor: pointer;
        color: #fff;
        line-height: 32px;
        white-space: nowrap;
        text-align: center;
        background-color: #c6c938;
        border-top-left-radius: 0px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 0px;
      }
    }
  }
}

.system-choose-modal {
  width: calc(100% - 40px);
  height: calc(100% - 84px);
  background-color: #003947;
  position: absolute;
  top: 60px;
  left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  opacity: 0;
  transition: all 0.5s;
  pointer-events: none;

  &.active {
    opacity: 1;
    pointer-events: auto;
  }

  .back-btn {
    position: absolute;
    right: 50px;
    top: 50px;
    color: $highBule;
    cursor: pointer;
  }

  .system-choose-item-body {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #0c272e;
    // border: 2px solid;
    // border-image: linear-gradient(180deg, #007180 0%, #00E2FF 51%, #007180 100%) 50 50;
    border: 1px solid transparent;
    border-radius: 16px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    // 背景和框 配置样式 （背景样式， border 颜色 ）
    background-image: linear-gradient(to right, #0c272e, #0c272e), linear-gradient(180deg, #007180 0%, #00e2ff 51%, #007180 100%);
    // }
    overflow: hidden;
    text-shadow: 1px 1px 0px #000;
    z-index: 0;

    &::after {
      content: '';
      height: 294px;
      width: 214px;
      background: #00e2ff;
      position: absolute;
      top: 244px;
      left: 18%;
      border-radius: 165px;
      box-shadow: 0px 0px 68px 65px #00e2ff;
    }

    &::before {
      content: '';
      height: 294px;
      width: 214px;
      background: #00e2ff;
      position: absolute;
      bottom: 244px;
      left: 18%;
      border-radius: 165px;
      box-shadow: 0px 0px 68px 65px #00e2ff;
    }
  }

  .system-choose-box {
    width: 100%;
    height: 100%;
    background: rgba(31, 123, 148, 0.4);
    padding: 12px 0;

    .system-content {
      height: 50%;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        width: calc(100% - 120px);
        height: 1px;
        background: rgb(0, 104, 108);
        top: 25px;
        left: 85px;
      }

      .system-name {
        color: $highBule;
        height: 30px;
        line-height: 30px;
        position: relative;
        padding-left: 10px;
        top: 10px;

        &::before {
          content: '';
          width: 3px;
          height: 30px;
          position: absolute;
          left: 0;
          top: 0;
          background: $highBule;
        }

        &::after {
          content: '';
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: $highBule;
          top: 11px;
          left: 85px;
          z-index: 1;
          box-shadow: 0 0 5px $highBule;
        }
      }

      .system-list {
        width: 100%;
        height: 90%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow-x: auto;
        padding: 0px 30px;

        .system-choose-item {
          color: #fff;
          min-width: 331px;
          height: 200px;
          // min-width: 20%;
          transition: all 0.5s;
          position: relative;
          // overflow: hidden;
          cursor: pointer;

          // 奇怪的按钮
          // &:hover {
          // font-size: 17px;
          // background-color: #4fc08d;
          // }
          .ds {
            height: 100%;
            width: 100%;
            position: absolute;
            overflow: hidden;
            border-radius: 16px;
            z-index: -1;
            // background:  #ffffff;
            filter: blur(3px);

            &:hover::after {
              // font-size: 17px;
              background: initial;
            }

            &:before,
            &:after {
              content: '';
              position: absolute;
              border-radius: 16px;
              top: -1px;
              right: -1px;
              background: linear-gradient(45deg, #ffffff, #00ecf5, #ffffff, #00ecf5, #ffffff, #00ecf5, #ffffff, #00ecf5, #ffffff, #00ecf5, #ffffff, #00ecf5);
              background-size: 400%;
              width: calc(100% + 2px);
              height: calc(100% + 2px);
              z-index: -1;
              transform-origin: right;
              animation: animate 5s linear infinite;
              filter: blur(3px);
            }

            &:after {
              filter: blur(3px);
            }

            @keyframes animate {
              0% {
                // transform-origin: right;
                // transform: rotate(0deg);
                background-position: 0 0;
              }

              50% {
                background-position: 100% 0;
                // transform-origin: right;
                // transform: rotate(180deg);
              }

              100% {
                // transform-origin: right;
                // transform: rotate(360deg);
                background-position: 0 0;
              }

              // from {
              //   transform-origin: right;
              //   transform: rotate(0deg);
              // }
              // to {
              //   transform-origin: right;
              //   transform: rotate(360deg);
              // }
            }
          }

          &.dpManage {
            .img {
              height: 70%;
              background: url("~@/assets/farm/dp.png") bottom center no-repeat;
              // background-size: 92% 80%;
              background-size: 71% auto;
            }
          }

          &.sy {
            .img {
              height: 70%;
              background: url('~@/assets/farm/sy.png') bottom center no-repeat;
              // background-size: 92% 80%;
              background-size: 71% auto;
            }
          }

          &.sc {
            .img {
              height: 70%;
              background: url('~@/assets/farm/sc.png') bottom center no-repeat;
              background-size: 71% auto;
            }
          }

          &.shhfw {
            .img {
              height: 70%;
              background: url('~@/assets/farm/shhfw.png') bottom center no-repeat;
              background-size: 71% auto;
            }
          }

          &.yy {
            .img {
              height: 70%;
              background: url('~@/assets/farm/yy.png') bottom center no-repeat;
              // background-size: 92% 80%;
              background-size: 71% auto;
            }
          }

          &.equip {
            .img {
              height: 70%;
              background: url('~@/assets/farm/equip.png') bottom center no-repeat;
              // background-size: 92% 80%;
              background-size: 56% auto;
            }
          }

          &.ZY {
            .img {
              height: 70%;
              background: url('~@/assets/farm/ZY.png') bottom center no-repeat;
              // background-size: 92% 80%;
              background-size: 71% auto;
            }
          }

          &.PROCESS {
            .img {
              height: 70%;
              background: url('~@/assets/farm/process.png') bottom center no-repeat;
              // background-size: 92% 80%;
              background-size: 71% auto;
            }
          }

          .system-btn {
            width: 110px;
            height: 35px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            background: #0c272e;
            // border: 2px solid;
            // border-image: linear-gradient(180deg, #007180 0%, #00E2FF 51%, #007180 100%) 50 50;
            border: 2px solid transparent;
            border-radius: 3px;
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
            // 背景和框 配置样式 （背景样式， border 颜色 ）
            background-image: linear-gradient(to right, #0c272e, #0c272e), linear-gradient(180deg, #007180 0%, #00e2ff 51%, #007180 100%);
            // }
            overflow: hidden;
            font-size: 19px;
            text-shadow: 1px 1px 0px #000;
            box-shadow: 0px 0px 3px #000;
            z-index: 1;
            right: 33%;
            bottom: -8%;

            &::after {
              content: '';
              height: 73px;
              width: 110px;
              background: #00e2ff;
              position: absolute;
              top: 48px;
              left: 0%;
              border-radius: 165px;
              box-shadow: 0px 0px 32px 15px #00e2ff;
            }

            &::before {
              content: '';
              height: 73px;
              width: 110px;
              background: #00e2ff;
              position: absolute;
              bottom: 48px;
              left: 0%;
              border-radius: 165px;
              box-shadow: 0px 0px 32px 15px #00e2ff;
            }
          }

          .img {
            height: 70%;
            // height: 100%;
            // border: 1px solid #25bda9;
            background: url('~@/assets/farm/yy.png') center center no-repeat;
            background-size: 71% auto;
            // background-size: 92% 80%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;

            p {
              width: 100%;
              text-align: center;
              padding: 2px 0;
              margin: 2px 0;
              color: #003947;
            }

            p:first-child {
              width: 100%;
              text-align: center;
              padding: 5px 0;
              margin: 2px 0;
              color: #fffff0;
              position: absolute;
              top: -1px;
              background: #25bda9;
              letter-spacing: 2px;
              font-size: 17px;
            }

            p:last-child {
              width: 100%;
              text-align: center;
              padding: 5px 0;
              margin: 2px 0;
              color: #fffff0;
              position: absolute;
              bottom: -1px;
              background: #00000060;
              letter-spacing: 0.5px;
              font-size: 15px;
            }

            align-items: center;
          }

          .name {
            color: #00ecf5;
            text-align: center;
            font-size: 21px;
            line-height: 40px;
          }

          &:hover {
            transform: scale(1.1);
          }

          &:not(:last-child) {
            margin-right: 30px;
          }
        }
      }
    }

    .system-content:nth-child(2) {
      height: 50%;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        width: calc(100% - 120px);
        height: 1px;
        background: rgb(0, 104, 108);
        top: 25px;
        left: 85px;
      }

      .system-name {
        color: $highBule;
        height: 30px;
        line-height: 30px;
        position: relative;
        padding-left: 10px;
        top: 10px;

        &::before {
          content: '';
          width: 3px;
          height: 30px;
          position: absolute;
          left: 0;
          top: 0;
          background: $highBule;
        }

        &::after {
          content: '';
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: $highBule;
          top: 11px;
          left: 85px;
          z-index: 1;
          box-shadow: 0 0 5px $highBule;
        }
      }

      .system-list {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .system-choose-item {
          color: #fff;
          text-shadow: 2px 2px 5px rgab(255, 255, 255, 0.5);

          width: 331px;
          height: 230px;

          // height: 220px;
          // transition: all 0.5s;
          .system-choose-item-body {
            &::after {
              content: '';
              height: 294px;
              width: 214px;
              background: #00e2ff;
              position: absolute;
              top: 269px;
              left: 18%;
              border-radius: 165px;
              box-shadow: 0px 0px 68px 65px #00e2ff;
            }

            &::before {
              content: '';
              height: 294px;
              width: 214px;
              background: #00e2ff;
              position: absolute;
              bottom: 269px;
              left: 18%;
              border-radius: 165px;
              box-shadow: 0px 0px 68px 65px #00e2ff;
            }
          }

          .img {
            margin-top: 13px;
            height: 70%;
            width: 325px;
            margin-right: 0;
            // border: 1px solid #1f9b93;
            // height: 70%;
            // background-size: 71% auto;

            // height: 100%;
            // border: 1px solid #25bda9;
            // background: url("~@/assets/backmsg.png") center center no-repeat;
            background: url(https://img.js.design/assets/img/613074df79456d9eec79f371.jpg) center center no-repeat;
            background-size: 92% 100%;
            // background-size: auto 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            position: relative;
            z-index: 12;

            b {
              background: #00000060;
              padding: 5px 15px;
              display: none;
            }

            &.picUrl {
              background-size: 100% 100% !important;
            }

            &.dt {
              background: url('~@/assets/farm/1111/dt.jpg') center center no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }

            &.dp {
              background: url('~@/assets/farm/1111/dp.jpg') center center no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }

            &.gc {
              background: url('~@/assets/farm/1111/gc.jpg') center center no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }

            &.sc {
              background: url('~@/assets/farm/1111/sc.jpg') center center no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }

            &.xm {
              background: url('~@/assets/farm/1111/xm.jpg') center center no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }

            &.yyj {
              background: url('~@/assets/farm/1111/yyj.jpg') center center no-repeat;
              // background-size: auto 100%;
              // background-size: 280px 140px;
            }

            p {
              width: 100%;
              text-align: center;
              padding: 2px 0;
              margin: 2px 0;
            }

            align-items: center;
          }

          .name {
            text-align: center;
            font-size: 21px;
            line-height: 40px;
          }

          &:hover {
            transform: scale(1.1);

            .img {
              b {
                display: inline-block;
              }
            }
          }

          &:not(:last-child) {
            margin-right: 30px;
          }
        }
      }
    }
  }
}

.copyright {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  color: white;
  line-height: 2;
  font-size: 10px;
  margin-bottom: 0;
  background-color: rgba(3, 65, 84, 1);
  height: 54px;
  position: absolute;
  width: 100%;
  bottom: 0;
}
</style>

<style lang="scss">
.el-scrollbar__wrap {
  overflow-x: hidden;
}

.is-horizontal {
  display: none;
}
</style>
